<template>
    <div>
        <Form :label-width="100" :model="dataToQuery">
            <div>
                <Row :gutter="16" class="query-form2">
                    <i-col span="8">
                        <FormItem label="交接人：">
                            <Input v-model="dataToQuery.handOverUserName" placeholder="请填写交接人"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="被交接人：">
                            <Input v-model="dataToQuery.beHandedOverUserName" placeholder="请填写被交接人"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <div style="float: right;">
                            <Button class="ivu-btn-query"  icon="md-search"  :loading='pageStatus.loading' @click="query">查询</Button>
                            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
                        </div>
                    </i-col>
                </Row>
            </div>
        </Form>
        <Row type="flex" justify="start" class="query-form">
            <i-col>
                <Button icon="md-add" class="ivu-btn-add" @click="addInfo">新增</Button>
            </i-col>
        </Row>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row type="flex" justify="end" >
            <i-col span="24">
                <Page :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </i-col>
        </Row>

        <Modal  title="工作交接" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"  :width=800 :styles="{height:'220px'}" class-name='limit-height-dialog'>
            <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'"
                  :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"
                  :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?170:null">
                <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
                    <i-col span="12">
                        <FormItem label='交接人：' prop='handOverUserId'>
                            <div v-if="mode === 'view'">{{ dataToView.handOverUserName }}</div>
                            <Input type="text"  v-else v-model="dataToView.handOverUserName" @on-focus="choosePeople('handOverUser')"></Input>
                        </FormItem>
                    </i-col>
                    <i-col span="12">
                        <FormItem label='被交接人：' prop="beHandedOverUserId">
                            <div v-if="mode === 'view'">{{ dataToView.beHandedOverUserName }}</div>
                            <Input type="text"  v-else v-model="dataToView.beHandedOverUserName" @on-focus="choosePeople('beHandedOverUser')"></Input>
                        </FormItem>
                    </i-col>
                </Row>
                <Row v-if="mode != 'view'" type="flex" justify="space-around" class="code-row-bg" :gutter="16">
                    <i-col span="24">
                        <p style="color:red">被交接人将可修改、删除交接人填报的数据</p>
                    </i-col>
                </Row>
            </Form>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>
        <UserSelect ref="userSelect" @closeModel="closeModel" @getSelectData="getSelectData" :userForSelectModal="userForSelectModal" :orgId="companyId">
        </UserSelect>
    </div>
</template>

<script>
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import {sessionStorage} from '@/common/cacheUtils.js';
    import {Api} from '@/api/index.js'
    import UserSelect from '../../safe/ptw/ticket/ptwTicketUserSelect.vue'

    export default {
        name: "handOverUser",
        components:{
            UserSelect
        },
        data(){
            return{
                ...this.createCommonDataField(),
                switchFlag: false,
                tableHeight:10,
                deleteUrl:Api.WorkHandOverUser,
                columns1: [
                    { title: '序号', width: 80, fixed: 'left', align: 'center', render: (h, params) => {
                            return h('span', params.index + (this.pagedata.fromPage - 1) * this.pagedata.pageSize + 1);
                        }},
                    { key:'handOverUserName',title: '交接人',  align: 'center', minWidth: 120},
                    { key:'beHandedOverUserName',title: '被交接人',  align: 'center', minWidth: 120},
                    { key:'createDate',title: '交接时间',  align: 'center', minWidth: 200},
                    { key:'createUserName',title: '创建人',  align: 'center', minWidth: 200},
                    this.getActionColumns(),
                ],
                ruleCustom: {
                    handOverUserId: [{required: true, message: '请选择交接人', trigger: 'blur, change'}],
                    beHandedOverUserId: [{required: true, message: '请选择被交接人', trigger: 'blur, change'}],
                },
                companyId: sessionStorage('userId').getObject('userId').companyId,
                currentChoosePeople:"",
                userForSelectModal:false,
                pagedata: {
                    total: 0, //总条数
                    fromPage: 1,//从n条开始
                    pageSize: 10//每页多少条
                },
            }
        },
        async mounted() {
            this.setTableHeight();
            this.query();
        },
        methods: {
            ...pageCommonFunction,
            pageChange(data){
                this.pagedata.fromPage = data;
                this.query();
            },
            pageSizeChange(size){
                this.pagedata.pageSize = size;
                this.query();
            },
            query() {
                this.pageStatus.loading = true;
                let data = {}
                data.fromPage = this.pagedata.fromPage;
                data.pageSize = this.pagedata.pageSize;
                this.dataToQuery.companyId = this.companyId;
                data = Object.assign(data,JSON.parse(JSON.stringify(this.dataToQuery)));
                this.$http.get(Api.queryWorkHandOverUserList, {params : data}).then(res => {
                    if(res.data.status == 200)
                        this.dataTable = res.data.data.data;
                    else
                        this.$Message.error(res.data.data);
                    this.pageStatus.loading = false;
                }).catch(e => {
                    this.$Message.error('请求失败');
                    this.pageStatus.loading = false;
                })
            },
            choosePeople(name){
                this.currentChoosePeople = name;
                this.$refs.userSelect.reset();
                this.userForSelectModal = true;
            },
            closeModel() {
                this.userForSelectModal = false;
            },
            getSelectData(user) {
                if (this.currentChoosePeople == 'beHandedOverUser') {
                    this.dataToView.beHandedOverUserId = user.userId
                    this.dataToView.beHandedOverUserName = user.userName
                } else if (this.currentChoosePeople == 'handOverUser') {
                    this.dataToView.handOverUserId = user.userId
                    this.dataToView.handOverUserName = user.userName
                }
                this.userForSelectModal = false;
            },
            submit(name) {
                if( this.mode == 'edit'){
                    this.$http.put(Api.WorkHandOverUser ,this.dataToView).then(res =>{
                        if(res.data.status == 200) {
                            this.dialogShow = false;
                            this.query();
                        }
                        else
                            this.$Message.error(res.data.data);
                    }).catch(e => {
                        this.$Message.error('请求失败');
                    })
                }else{
                    this.$http.post(Api.WorkHandOverUser ,this.dataToView).then(res =>{
                        if(res.data.status == 200) {
                            this.dialogShow = false;
                            this.query();
                        }
                        else
                            this.$Message.error(res.data.data);
                    }).catch(e => {
                        this.$Message.error('请求失败');
                    })
                }
            },
            handleCancel(){
                this.dialogShow = false;
            },
            deleteData(params) {
                this.deleteDateAjax(params);
            },
            setOrgName(data){
                this.dataToView.orgId = data.orgId;
                this.dataToView.orgName = data.orgName;
                this.queryTwolevelOrg(data.orgId);
            },
            queryTwolevelOrg(orgId) {
                this.$http.get(Api.securityDirectorInfo + '/twoLevelOrg', {params: {companyId: orgId}}).then((res) => {
                    if (res.data.status == 200) {
                        if (res.data.data != null) {
                            this.$set(this.dataToView, 'twoLevelGroupId', res.data.data.orgId);
                            this.$set(this.dataToView, 'twoLevelGroupName', res.data.data.orgName);
                        }
                    }
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
        }
    }
</script>

<style scoped>

</style>